<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css定位</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
				box-sizing: border-box;
			}
			/* 固定定位 相对页面是固定的，随便滑页面没影响*/
			.box2{
				position: fixed;
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
				right:0;
				top:0px;
				/* left:0; */
				/* bottom: 0; */
			}
			/* 相对定位（相对自己原来的位置）盒子走了位置还留着*/
			.box3{
				position: relative;
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
				left:100px;
				top:0px;
			}
			/* 绝对定位 盒子走了，位置不留（可以重叠别的盒子）*/
			.box4{
				position: absolute;
				left:200px;
				top: 200px;
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
			}
			/* 静态定位，没什么意义，但是能确定他是定位家族的，对后面的定位有一个参照物 */
			.box5{
				position:static;
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			第一个盒子
		</div>
		<div class="box2">
			第二个盒子
		</div>
		<div class="box3">
			第三个盒子
		</div>
		<div class="box4">
			第四个盒子
		</div>
		<div class="box5">
			第五个盒子
		</div>
	</body>
</html>
